<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
  <Modal :width="700"
         v-model='modal'
         title='查看大图'
         transfer
         :mask-closable='false'
         footer-hide>
    <div style="position: relative;"
         class="bigimgicon">
      <Icon style="left:8px;"
            class="bigimgicons"
            type="md-arrow-dropleft-circle"
            @click="clickimg(true)" />
      <Icon style="right:8px;"
            class="bigimgicons"
            type="md-arrow-dropright-circle"
            @click="clickimg(false)" />
      <div style="display: flex;align-items: center;justify-content: center;">
        <img :class="classname"
             :src="imglist[index]" />
      </div>
      <div style="display: flex;justify-content:center;align-items: center;">
        <!-- <i class="iconfont icon-nishizhenxuanzhuan" @click="degimgsubtract"/> -->
        <i class="iconfont icon-rotatexuanzhuan"
           @click="degimgsubtract" />
        <Page style="margin: 0 16px"
              :current="index+1"
              :total="imglist.length"
              size="small"
              :page-size="1"
              @on-change="changeChartPages" />
        <i class="iconfont icon-rotatexuanzhuan2"
           @click="degimgadd" />
      </div>
    </div>
  </Modal>
</template>

<script>
    export default {
        name: '',
        data () {
            return {
                modal: false,
                index: 0,
                imglist: [],
                deg: 0,
                classname: ''
            };
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial (index, list) {
                this.index = index
                this.imglist = list
                this.modal = true
            },
            clickimg (bool) {
                if (!bool) {
                    this.index = this.index + 1
                    if (this.index > this.imglist.length - 1) this.index = 0
                } else {
                    this.index = this.index - 1
                    if (this.index < 0) this.index = this.imglist.length - 1
                }
                // console.log(this.index, this.imglist.length)
            },
            changeChartPages (e) {
                this.index = e - 1
                this.deg = 0
                this.classname = ''
            },
            degimgadd () {
                this.deg++
                let num = this.deg % 4
                switch (num) {
                case 0: this.classname = ''; break;
                case 1: this.classname = 'img90'; break;
                case 2: this.classname = 'img180'; break;
                case 3: this.classname = 'img270'; break;
                case -0: this.classname = ''; break;
                case -1: this.classname = 'img270'; break;
                case -2: this.classname = 'img180'; break;
                case -3: this.classname = 'img90'; break;
                }
            },
            degimgsubtract () {
                this.deg--
                let num = this.deg % 4
                // console.log(num)
                switch (num) {
                case 0: this.classname = ''; break;
                case 1: this.classname = 'img90'; break;
                case 2: this.classname = 'img180'; break;
                case 3: this.classname = 'img270'; break;
                case -0: this.classname = ''; break;
                case -1: this.classname = 'img270'; break;
                case -2: this.classname = 'img180'; break;
                case -3: this.classname = 'img90'; break;
                }
            }
        }
    }
</script>
<style lang="less" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 2788485 */
  src: url("//at.alicdn.com/t/font_2788485_8pbac4fiet9.woff2?t=1630656498658")
      format("woff2"),
    url("//at.alicdn.com/t/font_2788485_8pbac4fiet9.woff?t=1630656498658")
      format("woff"),
    url("//at.alicdn.com/t/font_2788485_8pbac4fiet9.ttf?t=1630656498658")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-rotatexuanzhuan2:before {
  content: "\e6e2";
}

.icon-rotatexuanzhuan:before {
  content: "\e6eb";
}

.bigimgicon {
  .bigimgicons {
    color: rgba(0, 0, 0, 0.5);
    font-size: 50px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
  img {
    width: 500px;
    height: 500px;
    object-fit: contain;
    transition: all 0 ease-in-out;
  }
}
.img90 {
  transform: rotate(90deg) !important;
}
.img180 {
  transform: rotate(180deg) !important;
}
.img270 {
  transform: rotate(270deg) !important;
}
</style>
